<template>
  <div class="app-container">
    <!-- 顶部按钮部分 -->
    <div class="top_btn_box">
      <div>
        <el-button size="small" type="primary" @click="openChoosePerson"
          >新增</el-button
        >
        <el-button
          size="small"
          type="success"
          v-show="hasData"
          @click="savePerson"
          >保存</el-button
        >
      </div>
      <div v-show="hasData">
        <el-button size="small" type="danger" @click="deleteRow"
          >删除</el-button
        >
        <el-button
          size="small"
          type="primary"
          style="margin-right: 10px"
          @click="submitForReview"
          >提交审核</el-button
        >
        <helpBtn :helpId="3001" />
      </div>
    </div>

    <!-- flex布局 -->
    <div class="concent" v-show="hasData">
      <div class="input_box">
        <!-- 公共录入组件 -->
        <inputCommon
          ref="inputCommon"
          module="personalBasicInformation-06"
          tableId="9"
          v-loading="loading"
        ></inputCommon>
      </div>
      <div style="width: 480px">
        <workerList ref="workerList" :changePerson="changeWorker" />
      </div>
    </div>

    <!-- 选择个人信息弹窗 -->
    <ChoosePerson :visible="choosePerson.visible" :remoteClose="remoteClose" />
  </div>
</template>

<script>
import api from "@/api/test";
import ChoosePerson from "./choosePerson.vue";
import inputCommon from "../addWorker/input.vue";
import workerList from "./workerList.vue";
import helpBtn from "@/components/HelpBtn";
import {alertMsg} from "@/utils";

export default {
  name: "NewWorker",
  components: {
    ChoosePerson,
    inputCommon,
    workerList,
    helpBtn,
  },
  data() {
    return {
      // 选择人员
      choosePerson: {
        visible: false,
      },
      // 当前编辑的表单ID
      formId: "",
      hasData: false,
      loading: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 抓取数据判断是否有未提交数据
    async getData() {
      const res = await api.postBody(
        "/admin/api/bfmc/BasicInformationModificationController/employeeUpdatePageInit"
      );
      if (res.code == 1) {
        // console.log(res.data.data.list);
        if (res.data.list.length == 0) {
          console.log("没有数据");
          this.$refs.inputCommon.formData = {};
          this.$refs.workerList.tableData = [];
          this.hasData = false;
        } else {
          console.log(res.data);
          console.log("有数据");
          this.hasData = true;
          this.render(res.data);
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    // 选择新的人员
    async getInputAndList(data) {
      console.log(data);
      this.hasData = true;
      this.choosePerson.visible = false;
      this.render(data);
    },
    // 渲染全部页面
    async render(dataObj) {
      console.log(dataObj);
      this.$refs.inputCommon.formData = dataObj.input.newDto;
      this.formId = dataObj.input.id;
      this.$refs.workerList.tableData = await dataObj.list[0].list;
      this.$refs.workerList.openRow = [dataObj.input.newDto.aac001];
      this.$refs.workerList.highlight(dataObj.list[0]);
      this.$refs.workerList.selectAll();
    },
    // 打开人员选择窗口
    openChoosePerson() {
      this.choosePerson.visible = true;
    },
    // 关闭选择窗口
    remoteClose() {
      this.choosePerson.visible = false;
    },
    // 保存数据
    async savePerson() {
      console.log(this.$refs.inputCommon.formData);
      const params = {
        id: this.formId,
        mapdata: this.$refs.inputCommon.formData,
      };
      const res = await api.postBody(
        "/admin/api/bfmc/BasicInformationModificationController/saveFormData",
        params
      );
      if (res.code == 1) {
        // console.log('保存',res);
        this.$refs.workerList.loading = true;
        // 更新右侧数据
        this.$refs.workerList.tableData = res.data;
        this.$refs.workerList.selectAll();
        setTimeout(() => {
          this.$refs.workerList.loading = false;
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 点击右侧数据渲染左侧表单
    changeWorker(row) {
      // console.log(row);
      this.loading = true;
      this.$refs.inputCommon.formData = row.newDto;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    // 删除右侧选中行
    deleteRow() {
      this.$confirm("此操作将删除该行, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let url =
            "/admin/api/bfmc/BasicInformationModificationController/deleteData";
          let res = await api.queryBody(url, {
            ids: this.formId,
          });
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 获取列表IDS
    // getListIds() {
    //   let arr = this.$refs.workerList.tableData;
    //   for (let i = 0; i < arr.length; i++) {
    //     if (i == 0) {
    //       this.listIds = arr[i].id;
    //     } else {
    //       this.listIds = this.listIds + "," + arr[i].id;
    //     }
    //   }
    // },
    // 提交审核
    async submitForReview() {
      if(this.$refs.workerList.selectStr == ""){
        alertMsg({code:"0",msg:"请至少选择一个字段进行审核"});
        return ;
      }
      const params = {
        dataid: this.formId+","+this.$refs.workerList.selectStr,
        lcbh: "onTheJobPersonnelModification",
      };
      const res = await api.queryBody(
        "/admin/api/pmc/ProcessManagementController/review",
        params
      );
      if (res.code == 1) {
        this.$message.success(res.msg);
        setTimeout(() => {
          this.getData();
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.top_btn_box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.concent {
  display: flex;
  justify-content: space-between;
  .input_box {
    height: 500px;
    overflow: auto;
  }
}
</style>
